import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import "../styles/index.less";
import LazyLoad from "react-lazyload";
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile';
import { enquireScreen } from 'enquire-js';

const EducationInternship = ({ dataSource, ...props }) => {
  const [visible, setVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;
  const goViewPic = () => {
    setVisible(true);
  }
  return (
    <div className="retail">
      <div
        {...currentProps}
        className="retail-banner airpor-transportation-banner"
      >
        <QueueAnim
          key="QueueAnim"
          type={["bottom", "top"]}
          className="banner-text-wrapper"
          delay={200}
        >
          <p className="banner-title">机场物流协同决策</p>
          <p className="banner-describe">
            机场物流协同决策是以大数据技术为手段，结合了供应链智能算法技术，并结合顺丰多年在机场物流领域积累的场景实践经验，自主研发出了航空物流全链路的协同决策一站式服务，主要目标是提升航空物流整体运营率、货物流转时效以及吞吐量，最终成功打造智慧航空物流枢纽全链路解决方案。
          </p>
        </QueueAnim>
      </div>
      <div className="retail1-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">行业痛点</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className="item">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationItem1.png"
                    />
                    <div>
                      <p className="title">数据共享难</p>
                      <p className="subtitle">
                        参与通关物流流程的贸易、物流、代理企业、园区运营单位和监管单位等各企业单位部门众多，流程复杂，物流及通关数据在业务中所扮演的重要角色，具有商业机密性，参与方无法也不愿公开分享，形成数据壁垒。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item2">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationItem2.png"
                    />
                    <div>
                      <p className="title">物流信息化水平低</p>
                      <p className="subtitle">
                        没有形成统一信息系统标准，作业标准，各层数据难以交换共享，各流程环节无法平滑衔接数据整合难度大使得多部门协同难度大，耗时长。
                      </p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item3">
                    <img
                      className="icon"
                      src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationItem3.png"
                    />
                    <div>
                      <p className="title">运营落后协同难</p>
                      <p className="subtitle">
                        仍以分拣、中转和运输等单项或分段式服务为主，服务意识单薄、服务类型单一，难于形成一体化综合物流服务，不具备运营协同、异常协同、作业协同、计划协同等各个模块的协同能力。
                      </p>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>

      <div className="retail2-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">解决方案架构</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="pic">
            <LazyLoad>
              {isMobile ? 
                <img onClick={goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airport_h5.png'></img>:
                <img src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationSolution.png"></img>
              }
            </LazyLoad>
          </div>
        </div>
      </div>

      <div className="retail3-wrapper">
        <div className="c-grid-layout">
          <div className="case-top">
            <div>
              <span className="case-title">方案优势</span>
              <div className="case-line"></div>
            </div>
          </div>
          <div className="case-list">
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className="item">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationList1.png"
                      />
                    </LazyLoad>
                    <p className="title">赢得市场竞争优势</p>
                    <p className="subtitle">
                      亚洲第一个航空物流枢纽-鄂州机场（多主体协同决策）落地实践填补行业空白，以及诸多物流中转场在数字化和智能化转型过程中积累场景实践经验。
                    </p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item2">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationList2.png"
                      />
                    </LazyLoad>
                    <p className="title">有效提高流程效率</p>
                    <p className="subtitle">
                      借助不同的信息技术手段，充分采集过程中各种数据，实现各个环节对应要素充分物联网化，实现不同业务主体不同物流网路互联互通，高效运转，全生命周期数字化管理。
                    </p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className="item item3">
                    <LazyLoad>
                      <img
                        className="icon"
                        src="https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airporTransportationList3.png"
                      />
                    </LazyLoad>
                    <p className="title">优化企业决策层经营管理</p>
                    <p className="subtitle">
                      利用大数据技术，对客户货运数据、历史数据等进行充分挖掘，决策分析，大屏直观展示有效信息，助力管理者做出更好的经营决策。
                    </p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <ImageViewer
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/airport_h5.png'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  );
};

export default EducationInternship;
